<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 14:49:34
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/调查问卷 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>调查问卷</h3>
      </div>
      <div class="table">
        <div class="tableHeader tableContent">
          <h3>问卷名称</h3>
          <p>调研时间</p>
          <span>操作</span>
        </div>
        <div
          class="tableBody tableContent"
          v-for="item in tableData"
          :key="item.id"
        >
          <h3>青岛即墨高一语文教研会调研问卷</h3>
          <p>永久生效</p>
          <span @click="dialogVisible = true">参与调研</span>
        </div>
      </div>
      <div class="anQS">
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="960px"
          :close-on-click-modal="tipsClose"
        >
          <div class="qsContent">
            <h2>高一语文线上教研活动调研表</h2>
            <p>
              为了方便更好的用户体验，特此借2022年秋季开学季进行满意度的问卷调研；本次调研活动可能会占用您3分钟时间，请您认真填写：
            </p>
            <div class="quesAns">
              <div class="question">
                <span>1</span>
                <p>、您是第一次关注我们平台，并且参与调研报告么？</p>
              </div>
              <div class="ans">
                <el-radio-group v-model="radio1">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="quesAns">
              <div class="question">
                <span>2</span>
                <p>
                  、本次《红楼梦与乡土中国》主题教研活动您感觉对您有帮助吗，您感觉满意程度？
                </p>
              </div>
              <div class="ans">
                <el-radio-group v-model="radio2">
                  <el-radio :label="1">非常满意</el-radio>
                  <el-radio :label="2">比较满意</el-radio>
                  <el-radio :label="3">一般</el-radio>
                  <el-radio :label="4">不满意</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="quesAns">
              <div class="question">
                <span>2</span>
                <p>
                  、本次《红楼梦与乡土中国》主题教研活动您感觉对您有帮助吗，您感觉满意程度？
                </p>
              </div>
              <div class="ans">
                <el-radio-group v-model="radio3">
                  <el-radio :label="1">非常满意</el-radio>
                  <el-radio :label="2">比较满意</el-radio>
                  <el-radio :label="3">一般</el-radio>
                  <el-radio :label="4">不满意</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="quesAns">
              <div class="question">
                <span>4</span>
                <p>、您最喜欢的模块是哪个模块的内容推荐？</p>
              </div>
              <div class="ans">
                <el-radio-group v-model="radio4">
                  <el-radio :label="1">活动中心</el-radio>
                  <el-radio :label="2">资源中心</el-radio>
                  <el-radio :label="3">产品中心</el-radio>
                  <el-radio :label="4">教研课</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="quesAns">
              <div class="question">
                <span>5</span>
                <p>
                  、关于本活动调研，您认为我们有什么需要改进的地方，提一些意见？
                </p>
              </div>
              <div class="ans">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8 }"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </div>
            </div>
          </div>
          <button @click="submit">提交问卷</button>
        </el-dialog>
      </div>
      <div class="gongzhonghao">
        <el-dialog :visible.sync="gzhVisible" width="440px" custom-class="gzh">
          <h3>问卷提交成功</h3>
          <p>恭喜您，问卷提交成功，请扫描下方二维码关注公众号,</p>
          <p>获取更多教学资源吧</p>
          <img src="" alt="" />
        </el-dialog>
      </div>
      <div class="page1">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[7, 14, 21, 28]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="145"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeClass",
  components: {},
  data() {
    return {
      tipsClose: false,
      dialogVisible: false,
      gzhVisible: false,
      currentPage: 1,
      radio1: 2,
      radio2: 2,
      radio3: 2,
      radio4: 2,
      textarea: "",
      tableData: [
        {
          id: 1,
          name: "青岛即墨高一语文教研会调研问卷",
          time: "永久生效 ",
          doIt: "参与调研",
        },
        {
          id: 2,
          name: "青岛即墨高一语文教研会调研问卷",
          time: "永久生效 ",
          doIt: "参与调研",
        },
        {
          id: 3,
          name: "青岛即墨高一语文教研会调研问卷",
          time: "永久生效 ",
          doIt: "参与调研",
        },
        {
          id: 4,
          name: "青岛即墨高一语文教研会调研问卷",
          time: "永久生效 ",
          doIt: "参与调研",
        },
        {
          id: 5,
          name: "青岛即墨高一语文教研会调研问卷",
          time: "永久生效 ",
          doIt: "参与调研",
        },
      ],
    };
  },
  methods: {
    handleClose() {
      console.log(123);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    submit() {
      this.dialogVisible = false;
      this.gzhVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  .content {
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .table {
      margin: 0 auto;
      width: 840px;
      border-top: 1px solid #dee0e3;
      border-left: 1px solid #dee0e3;
      // border-bottom: 1px solid #DEE0E3;
      .tableContent {
        display: flex;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #dee0e3;
        h3 {
          padding-left: 20px;
          width: 380px;
          font-size: 17px;
          color: #333333;
          font-weight: 900;
          border-right: 1px solid #dee0e3;
        }
        p {
          padding-left: 20px;
          width: 258px;
          font-size: 16px;
          font-weight: 900;
          color: #333333;
          border-right: 1px solid #dee0e3;
        }
        span {
          padding-left: 20px;
          width: 141px;
          font-size: 16px;
          color: #333333;
          font-weight: 900;
          border-right: 1px solid #dee0e3;
          cursor: pointer;
        }
      }
      .tableBody {
        display: flex;
        height: 35px;
        line-height: 35px;
        font-weight: normal;
        border-bottom: 1px solid #dee0e3;

        h3 {
          color: #646566;
          font-size: 13px;
          font-weight: normal;
        }
        p {
          color: #646566;

          font-size: 13px;
          font-weight: normal;
        }
        span {
          font-size: 14px;
          font-weight: normal;
          color: #08a579;
        }
      }
    }
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      position: relative;
      right: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
      .qsContent {
        margin-left: 60px;
        height: 60vh;
        overflow-y: scroll;
        h2 {
          margin-bottom: 30px;
          font-size: 20px;
          color: #333;
          text-align: center;
        }
        p {
          margin-bottom: 30px;
          color: #646566;
          font-size: 14px;
        }
        .quesAns {
          margin-bottom: 30px;
          .question {
            display: flex;
            margin-bottom: 20px;
            p {
              margin: 0;
            }
          }
          .ans {
            textarea {
              width: 800px;
              height: 200px;
            }
          }
        }
      }
      button {
        position: relative;
        left: 741px;
        margin-bottom: 30px;
        width: 120px;
        height: 40px;
        background: #08a579;
        border-radius: 4px;
        color: #fff;
        line-height: 40px;
        border: 0;
        cursor: pointer;
      }
      ::-webkit-scrollbar {
        width: 7px;
      }
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-button {
        background-color: #eee;
        display: none;
      }
      ::-webkit-scrollbar-corner {
        background-color: black;
      }
    }
    .gzh {
      h3 {
        margin-bottom: 38px;
        text-align: center;
        font-size: 20px;
      }
      p {
        text-align: center;
        font-size: 14px;
      }
      img {
        margin-top: 60px;
        margin-left: 120px;
        margin-bottom: 60px;
        width: 200px;
        height: 200px;
      }
    }
    .page1 {
      width: 700px;
      margin: 20px auto;
    }
    .el-pagination {
      text-align: right;
      margin: 20px 80px 20px 0;
    }
  }
}
</style>
